<template>
  <div class="col-right d-none d-lg-block" style="">
    <a :href="listTop.routerUrl" rel="nofollow" target="_blank"
      ><img style="width:100%" :src="listTop.url" :alt="listTop.name"
    /></a>
    <div class="sidebar-box">
      <h4 class="sidebar-title">随机文章</h4>
      <div class="sidebar-log">
        <ul>
          <li v-for="(item, index) in randomList" :key="index">
            <a @click="gotoContent(item.id)"
              >{{ item.title }}<span>{{ item.tag }}</span></a
            >
          </li>
          <!--         
          <li>
            <a href="http://www.shukoe.com/post-173.html"
              >360联盟注册账号出现问题怎么办？</a
            >
          </li> -->
        </ul>
      </div>
    </div>
    <div class="sidebar-box1">
      <h4 class="sidebar-title">左邻右舍</h4>
      <div class="sidebar-link">
        <ul class="clearfix">
          <div v-for="(item, index) in linkList" :key="index" class="link-row">
            <div class="link-title" v-if="item.children.length > 0">【{{ item.nameZh }}】</div>
            <li class="link-li" v-for="(item1, index1) in item.children" :key="index1">
              <a :href="item1.url" :title="item1.name" target="_blank">{{
                item1.name
              }}</a>
            </li>
          </div>
        </ul>
      </div>
    </div>
    <div id="sticky-wrapper" class="sticky-wrapper" style="height: 209px;">
      <div class="sidebar-box js_asd_bottom" style="width: 300px;">
        <div class="sidebar-custom">
          <a :href="listBottom.routerUrl" rel="nofollow" target="_blank"
            ><img :src="listBottom.url" :alt="listBottom.name"
          /></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/assets/event-bus.js";
import {
  getArticlesDetail,
  getClasstypes,
  getArticleList,
  getLinks,
  radomArticle
} from "@/api/common";
export default {
  name: "ArticleRight",
  data() {
    return {
      listTop: {},
      listBottom: {},
      randomList: [],
      linkList: []
    };
  },
  methods: {
    // 进入文章详情
    gotoContent(articleIndex, types, idIndex) {
      const { href } = this.$router.resolve({
        path: "/articleContent",
        query: {
          articleIndex: articleIndex,
          types: types,
          idIndex: idIndex
        }
      });
      window.open(href, "_blank");

      // this.$router.push({
      //   path: "/articleContent",
      //   query: {
      //     articleIndex: articleIndex,
      //     types:types,
      //     idIndex:idIndex
      //   }
      // });
    },
    // 获取侧边栏广告图
    getData(flag) {
      this.axios
        .get(`${this.baseUrl}/sidebarAdImgs/get`, {
          params: {
            flag: flag
          }
        })
        .then(res => {
          let list = res.data.resulet;
          list.forEach((item, index) => {
            if (item.types == "top" && item.show == 1) {
              this.listTop = item;
            } else if (item.types == "buttom" && item.show == 1) {
              this.listBottom = item;
            }
          });
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    // 获取友情链接

    getLink() {
      getLinks().then(
        res => {
          this.linkList = res.list || [];
          console.log(res);
        },
        error => {
          this.$Message.error(error);
        }
      );
    },
    // 获取随机文章
    radomArticle() {
      radomArticle().then(
        res => {
          this.randomList = res || [];
       
        },
        error => {
          this.$Message.error(error);
        }
      );
    }
  },
  computed: {},
  mounted() {
    this.getLink();
    this.radomArticle()
  }
};
</script>

<style lang="less" scoped>
.d-none {
  display: none !important;
}
.d-lg-block {
  @media screen and (min-width: 992px) {
    display: block !important;
  }
  a {
    cursor: pointer;
    text-decoration: none;
    color: #212529;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    img {
      vertical-align: middle;
      border-style: none;
    }
  }
  .sidebar-box {
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    .sidebar-title {
      font-weight: 700;
      line-height: 2;
      margin-bottom: 10px;
    }
    h4 {
      font-size: 18px;
    }
    ul {
      padding-left: 0;
      list-style: none;
      margin-top: 0;
      margin-bottom: 0;
      li {
        border-bottom: 1px dashed #e9ecef;
        display: list-item;
        text-align: -webkit-match-parent;

        a {
          line-height: 35px;
          display: block;
          overflow: hidden;
          height: 35px;
        }
      }
    }
  }
  .sidebar-box1 {
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    .sidebar-title {
      font-weight: 700;
      line-height: 2;
      margin-bottom: 10px;
    }
    h4 {
      font-size: 18px;
    }
    .sidebar-link {
      padding-top: 10px;
      ul {
        padding-left: 0;
        list-style: none;
        margin-top: 0;
        margin-bottom: 0;
        li {
        //   float: left;   
          display: list-item;
          text-align: -webkit-match-parent;
          width: 50%;
          a {
            line-height: 2;
            display: block;
            overflow: hidden;
          }
        }
        li:nth-child(2n-1) {
          padding-right: 5px;
        }
        .link-row::after {
        display: block;
        clear: both;
        content: "";
      
        }
      }
      .link-li::after {
        display: block;
        clear: both;
        content: "";
      }
      .link-title{
          font-size: 16px;
          font-weight: bold;
      }
    }
  }
}
.col-right {
  float: right;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  @media screen and (min-width: 992px) {
    width: 320px;
  }
  @media screen and (min-width: 1200px) {
    width: 320px;
  }
}
.sidebar-box {
  margin-bottom: 20px;
  padding: 30px;
  background-color: #fff;
  a {
    cursor: pointer;
    text-decoration: none;
    color: #212529;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
      border-style: none;
    }
  }
}

</style>
